<template>
  <div class="home_club">
     <!-- 俱乐部快捷入口 -->
    <div class="quick_list_box">
      <div v-for="item in buttons" :key="item.id" class="button_item" @click="goToPage(item)">
        <div class="button_item_left">
          <img :src="item.icon" :alt="item.text" class="icon" />
          <span>{{ t(item.text) }}</span>
        </div>
        <div class="button_item_right">
          <img :src="item.logo" :alt="item.text" class="logo" />
        </div>
      </div>
    </div>

    <!-- 加入的俱乐部 -->
    <div class="club_list_box" v-if="isLocalLoggedIn && clubListData.length > 0">
      <ul class="card_title">
        <li class="title_left">
          <ImgT src="/imgs/club/icon1.webp" alt="" />
          <span>{{ t('club_page_jrdjlb') }}</span>
        </li>
        <li class="title_right">
          <p class="more" @click="router.push('/club/myClub')">
            {{ t('home_page_more') }}
          </p>
        </li>
      </ul>
      <div class="club_list">
        <div v-for="club in clubListData" :key="club.club_id" @click="enterClub(club.club_id)" class="club_card">
          <ClubItem :item="club" :isTables="true" />
        </div>
      </div>
    </div>

    <!-- 加入的牌局 -->
    <div class="gambling_list_box" v-if="isLocalLoggedIn && destListData.length > 0">
      <ul class="card_title">
        <li class="title_left">
          <ImgT src="/imgs/club/icon1.webp" alt="" />
          <span>{{ t('club_page_jrdpj') }}</span>
        </li>
        <li class="title_right">
          <p class="more" @click="router.push('/club/myHandList')">
            {{ t('home_page_more') }}
          </p>
        </li>
      </ul>
      <div class="card_container">
        <GmablingCard :gameType="gamblingInfo.game_type" :gamblingList="destListData" />
      </div>
      
    </div>

    <!-- 加入俱乐部/牌局弹窗 -->
    <Modal v-model:visible="isShowWin" :title="t(club_title)" @close="handleClose">
      <div class="popup_body">
        <nut-input v-model="club_id" :placeholder="club_pl_text" />
        <div class="submit_btn">
          <Btn height="44px" width="200px" class="submit" @click="submitAc">{{ t('club_page_ss') }}</Btn>
        </div>
      </div>
    </Modal>

    <!-- 等待 -->
    <Modal v-model:visible="isShowWait" :title="t(club_title)" @close="">
      <div class="popup_body">
        <div v-if="clubType == 'joinPlay'">
          <img src="" alt="">
          <p class="wait_title">{{ t('club_page_jrpjddz') }}</p>
        </div>
        <!-- <div class="" v-else>
          <p class="wait_title">{{ t('club_page_jrjlbsq') }}</p>
        </div> -->
        <div class="submit_btn">
          <Btn height="44px" width="200px" class="submit" @click="submitgg">{{ t('club_page_xqgg') }}</Btn>
        </div>
      </div>
    </Modal>

    <!-- 搜索牌局返回数据 -->
    <Modal v-model:visible="isGamblingInfo" :title="t(club_title)" @close="">
      <div class="popup_body">
        <div class="club_info">
          <div class="club_left">
            <p class="club_name">{{ gamblingInfo.club_name }}</p>
            <p class="club_username"> {{ t('club_page_cjz') }}： {{ gamblingInfo.username }}</p>
          </div>
          <div class="club_id">
            {{ t('club_page_pjid') }} {{ gamblingInfo.room_id }}
          </div>
        </div>
        <GmablingCard :gameType="gamblingInfo.game_type" :gamblingList="gamblingList" />
        <div class="submit_btn">
          <Btn height="44px" width="200px" class="submit" @click="submitLjjr">{{ t('club_page_ljjr') }}</Btn>
        </div>
      </div>
    </Modal>

    <!-- 快速游戏 -->
    <QuickStartModal
      v-model:visible="isShowApply"
      :close="onModalClose"
    />
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import {  ref, onBeforeMount, watch, onUnmounted, onMounted } from 'vue';
import { i18n } from '@/languages';
import { storeToRefs } from 'pinia';
import pinia from '@/store/index';
import { useI18n } from 'vue-i18n';
import { Page } from '@/store/page';
import { User } from '@/store/user';

import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";

import { showToast } from "@nutui/nutui";
// import { getSelfGameUrl } from '@/utils/useNetMethods';
import { useRouter } from "vue-router";
const router = useRouter();

const { lang } = storeToRefs(Page(pinia));
const { isLocalLoggedIn } = storeToRefs(User(pinia));

const { t } = useI18n();

import QuickStartModal from "@/components/quickStartModal.vue";
import GmablingCard from "@/components/gamblingCard.vue";
import ClubItem from "@/components/ClubItem.vue";

const props: any = defineProps({
  tabInfo: {
    type: Object,
    default: () => ({}), // 设置默认值
  },
});

const buttons: any = ref([
  {
    id: 1,
    text: 'club_page_cjjlb',
    value: 'create',
    icon: '/imgs/club/club1.webp',
    logo: '/imgs/club/icon1.webp',
    route: '/club',
  },
  {
    id: 2,
    text: 'club_page_jrjlb',
    value: 'join',
    icon: '/imgs/club/club2.webp',
    logo: '/imgs/club/icon2.webp',
    route: '',
  },
  {
    id: 3,
    text: 'club_page_jrpj',
    value: 'joinPlay',
    icon: '/imgs/club/club3.webp',
    logo: '/imgs/club/icon3.webp',
    route: '',
  },
  {
    id: 4,
    text: 'club_page_ksks',
    value: 'start',
    icon: '/imgs/club/club4.webp',
    logo: '/imgs/club/icon4.webp',
    route: '',
  },
]);

const clubListData: any = ref([]);

const destListData: any = ref([]);

const gamblingList: any = ref([]);

const gamblingInfo: any = ref({})

const isShowApply = ref(false);
const handleStartClick = () => {
  // getQuickList();
  isShowApply.value = true
}

const onModalClose = () => {
  isShowApply.value = false;
};

const isShowWin = ref(false);
const isShowWait = ref(false);
const isGamblingInfo = ref(false);
const club_id = ref('');
const club_title = ref('');
const club_pl_text = ref('')
const clubType = ref('')
const goToPage = (item: any) => {
  console.log('item', item)
  if (item.value === 'create') {
    router.push(item.route)
  } else if (['join', 'joinPlay'].includes(item.value)) {
    isShowWin.value = true
    club_title.value = item.text
    club_pl_text.value = item.value === 'join' ? t('club_page_qsrjlbid') : t('club_page_qsrpjid')
    clubType.value = item.value
  } else if (item.value === 'start') {
    handleStartClick()
  }
}



// 加入俱乐部提交
const onSubmit = () => {
  const req: any = NetPacket.req_join_club();
  req.club_id = club_id.value.trim();
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_join_club",
    callback: joinClubHandle,
  });
};
// 监听加入俱乐部
const joinClubHandle = (res: any) => {
  const tipStr: any = {
    0: t('club_page_tips0'),
    1: t('club_page_tips1'),
    2: t('club_page_tips2'),
    3: t('club_page_tips3'),
    4: t('club_page_tips4')
  };
  if (res.result === 0) {
    showToast.text(t(tipStr[res.result]))
    isShowWin.value = false 
    getClubList()
  }
  //  else if (res.result === 2) {
  //   isShowWin.value = false 
  //   isShowWait.value = true
  // } 
  else {
    showToast.text(t(tipStr[res.result]))
    isShowWin.value = false 
  }
};

// 加入牌桌
const onPlaySubmit = () => {
  const req: any = NetPacket.req_join_desk();
  req.desk_id = gamblingInfo.value.room_id;
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_join_desk",
    callback: joinPlayHandle,
  });
};
// 监听加入牌桌
const joinPlayHandle = (res: any) => {
  const tipStr: any = {
    0: t('club_page_tips0'),
    1: t('club_page_tips5'),
    2: t('club_page_tips6'),
    3: t('club_page_tips7'),
    4: t('club_page_tips8'),
    5: t('club_page_tips9'),
  };
  if (res.result === 0) {
    showToast.text(t(tipStr[res.result]))
    isGamblingInfo.value = false
    getMyDestList()
  } else if (res.join_club_audit === 1)  {
    isShowWait.value = true
  } else {
    showToast.text(t(tipStr[res.result]))
  }
};

// 搜索牌局 
const getSearchDesk = () => {
  const req: any = NetPacket.req_search_desk();
  req.room_id = club_id.value.trim();
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_search_desk",
    callback: getSearchDeskHandle,
  });
};
// 监听加入牌桌
const getSearchDeskHandle = (res: any) => {
  console.log('搜索牌局', res)
  const tipStr: any = {
    1: t('club_page_tips5'),
    2: t('club_page_tips6'),
    3: t('club_page_tips8'),
    4: t('club_page_tips9'),
  };
  if (res.result === 0) {
    isShowWin.value = false
    isGamblingInfo.value = true
    
    gamblingList.value = [
      {
        'game_type': res.game_type,
        'play_type': res.play_type,
        'desk_name': res.desk_name,
        'min_bet': res.small_blind,
        'max_blind': res.max_blind,
        'role_count': res.role_count,
        'max_player': res.max_player,
        'need_chip': res.min_take,
      }
    ]
    gamblingInfo.value = res
  } else {
    showToast.text(t(tipStr[res.result]))
  }
};

const submitAc = () => {
  if (!club_id.value) return showToast.text(t('club_page_qsrid'));
  const submitAction = clubType.value === 'join' ? onSubmit : getSearchDesk;
  submitAction();
};

const submitgg = () => {

  isShowWait.value = false
}

const submitLjjr = () => {
  onPlaySubmit()
}

// 获取俱乐部列表
const getClubList = () => {
  const req = NetPacket.req_get_club_list();
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_club_list",
    callback: getClubListHandle,
  });
};
// 俱乐部列表返回
const getClubListHandle = (res: any) => {
  res.joined_club_list = res.joined_club_list.slice(0, 3)
  clubListData.value = [ ...res.joined_club_list];
};

// 我加入的牌局列表
const getMyDestList = () => {
  const req = NetPacket.req_get_joined_dest_list();
  req.game_type = -1;
  req.page = 1;
  PKwebsocket.instance.send(req, true, {
    callbackName: "msg_notify_get_joined_dest_list",
    callback: getPlayHandle,
  });
}
// 监听加入牌局列表
const getPlayHandle = (res: any) => {
  res.desk_list = res.desk_list.slice(0, 1)
  destListData.value = res.desk_list
};
const enterClub = (id: number) => {
  router.push({
    path: "/club/detail",
    query: {
      club_id: id,
    },
  });
}

const handleClose = () => {
  club_id.value = ''
}

watch(
  () => props.tabInfo,
  () => {
    getClubList();
    getMyDestList();
  },
  { immediate: true, deep: true }
);

onBeforeMount(() => {
  i18n.global.locale.value = lang.value
})

onUnmounted(() => {
  
});

onMounted( () => {
  if(isLocalLoggedIn.value) {
    getClubList();
    getMyDestList();
  }
});
</script>

<style lang="scss" scoped>
.home_club {
  .card_title {
        display: flex;
        padding: 0 14px 0 0;
        justify-content: space-between;
        align-items: center;
        height: 24px;
        line-height: 24px;
        margin: 12px 0;

        .title_left {
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 16px;
          text-align: left;
          color: #FCFFFA;
          display: flex;
          justify-content: space-between;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
        }

        .title_right {
          font-family: PingFang SC;
          font-size: 12px;
          font-weight: 500;
          color: #C6C4F5;
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 24px;

          .more {
            background: #282747;
            // margin-left: 8px;
            // height: 100%;
            line-height: 25px;
            padding: 0px 8px;
            border-radius: 6px;
            box-shadow: 0.5px 0.5px 1px 0px #4B4A6E inset;
          }

          .swiper-btn {
            position: relative;
            top: 4px;
            margin-left: 8px;
          }

          .disabled {
            pointer-events: none;
            opacity: 0.5;
            cursor: not-allowed;
          }
        }
      }
  .club_list_box {
      padding-left: 14px;

      .club_list {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
    }

    .gambling_list_box {
      padding-left: 14px;

      

      .card_container {
        display: flex;
        flex-direction: column;
        width: 347px;
        gap: 10px;
      }
    }

    .quick_list_box {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      padding: 10px;

      .button_item {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 168px;
        height: 68px;
        border-radius: 10px;
        color: white;
        text-align: center;
        box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;

        .button_item_left {
          .icon {
            width: 24px;
            height: 24px;
            display: block;
            margin: 0 auto 6px;
          }

          span {
            font-size: 14px;
            text-align: center;
            color: #FFFFFF;
          }
        }

        .button_item_right {
          .logo {
            width: 58px;
            height: 58px;
          }
        }
      }

      .button_item:nth-child(1) {
        background: url(/imgs/club/add1_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .button_item:nth-child(2) {
        background: url(/imgs/club/add2_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .button_item:nth-child(3) {
        background: url(/imgs/club/add3_bg.png) no-repeat;
        background-size: 100% 100%;
      }

      .button_item:nth-child(4) {
        background: url(/imgs/club/add4_bg.png) no-repeat;
        background-size: 100% 100%;
      }
    }
}
.popup_body {
  color: #fff;
  padding: 10px;

  .info {
    margin-bottom: 10px;
  }

  .club_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0;

    .club_left {
      .club_name {
        color: #FFF;
        text-align: center;
        font-family: "PingFang SC";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
      }
      .club_username {
        color: #C6C4F5;
        font-family: "PingFang SC";
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 150%; /* 18px */
      }
    }

    .club_id {
      width: 113px;
      height: 30px;
      padding: 0 12px;
      line-height: 30px;
      color: #C6C4F5;
      font-family: "PingFang SC";
      font-size: 12px;
      font-style: normal;
      font-weight: 400;
      border-radius: 8px;
      background: linear-gradient(90deg, rgba(19, 18, 50, 0.00) 0%, #2F2D6C 100%), #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2E296B inset;
    }
  }
  :deep(.nut-input) {
    background: rgba(29, 14, 74, 1);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset;
    border-radius: 8px;
    border-bottom: 0;
    padding: 10px;
  }
  .submit_btn {
    margin: 20px;
    display: flex;
    justify-content: center;
  }
  .wait_title {
    text-align: center;
    margin: 24px 0;
  }
}
</style>